<div class="annotations-settings">
  <table>
    <tr class="row">
      <td class="title">
        {{gettext 'Stroke: width / color'}}
      </td>
      <td class="controls stroke">
        <div data-dojo-attach-point="widthStroke"
             data-dojo-props="constraints:{min:0,max:20,places:0},
                 invalidMessage:'{{gettext 'Please enter a numeric value'}}',
                 rangeMessage:'{{gettext 'Invalid width: should be from 0 to 20 px'}}'"
             data-dojo-type="dijit/form/NumberTextBox"
             title="{{gettext 'Stroke width, px'}}"
             value="1"></div>
        <input
          class="color-selector"
          data-dojo-attach-point="colorStroke"
          title="{{gettext 'Stroke color'}}"
          type="color"
          value="#cc9900"/>
      </td>
    </tr>
    <tr class="row">
      <td class="title">
        {{gettext 'Fill color'}}
      </td>
      <td class="controls fill">
        <input
          class="color-selector"
          data-dojo-attach-point="fillStroke"
          title="{{gettext 'Fill color'}}"
          type="color"
          value="#ff9900"/>
      </td>
    </tr>
    <tr class="row">
      <td class="title">
        {{gettext 'Circle size, px'}}
      </td>
      <td class="controls circle-size">
        <div data-dojo-type="dijit/form/NumberTextBox"
             data-dojo-attach-point="circleSize"
             title="{{gettext 'Circle size, px'}}"
             width="100%"
             data-dojo-props="constraints:{min:1,max:100,places:0},
                 invalidMessage:'{{gettext 'Please enter a numeric value'}}',
                 rangeMessage:'{{gettext 'Invalid width: should be from 1 to 100 px'}}'"
             value="5"></div>
      </td>
    </tr>
  </table>
</div>
